<template>
  <!-- 竞拍市场  我的出价 -->
  <div class="app-container">
    <div class=" search-box">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px" >
        <el-form-item label="游戏类型" prop="gameId">
          <el-select v-model="queryParams.gameId" placeholder="请选择游戏" size="small" clearable >
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" size="small" clearable >
            <el-option v-for="(dict,key) in statusMap" :key="key" :label="dict.label" :value="key" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="账号" prop="account">
          <el-input v-model="queryParams.account" placeholder="请输入账号" clearable size="small" />
        </el-form-item> -->
        <!-- <el-form-item label="简介" prop="des">
          <el-input v-model="queryParams.des" placeholder="请输入关键字" clearable size="small" />
        </el-form-item> -->
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" size="small" @click="search" class="zdy-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" type="primary" size="small" plain @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div class=" table_box" v-loading="loading">
      <!-- <div class="tip" @click="openUrl('https://imgage.maimaihao.com/videoDoc/%E5%9B%9E%E6%94%B6%E8%81%94%E7%9B%9F%E7%B3%BB%E7%BB%9F%E8%AE%B2%E8%A7%A3.mp4')">不会操作？查看视频教程
        </div> -->
      <el-table :data="tableData.records" style="width: 100%">
        <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
        <!-- <el-table-column v-if="actived == '已拒收'" prop="rmsg" label="拒收原因" width="120"></el-table-column>
        <el-table-column prop="partition" label="来源" width="80" v-if="pageType == 'lianmeng'">
          <template slot-scope="scope">
            <span v-if="scope.row.partition == 1" style="color: #947f08;">回收链接</span>
            <span v-if="scope.row.partition == 2" style="color: #6f920f;">官网</span>
            <span v-if="scope.row.partition == 3" style="color: #af74ef;">
              三方
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="gameName" label="游戏名称" width="150"></el-table-column>
        <el-table-column prop="region" label="区服" width="150"></el-table-column>

        <!-- <el-table-column prop="account" label="游戏账号" width="100" v-if="actived == '已报价'"></el-table-column> -->
        <el-table-column prop="relname" label="实名" width="100"></el-table-column>

        <!-- isAgreeBp -->
        <el-table-column prop="des" label="商品详情" min-width="260">
          <template slot-scope="scope">
          
              <div class="zdy-des" @click="openDetail(scope.row.id,'view')">{{ scope.row.des }}</div>
           
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
        <el-table-column prop="bstate" label="状态" width="110">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.bstate==0">待接受</el-tag>
            <el-tag type="success" v-if="scope.row.bstate==1">已接受</el-tag>
            <el-tag type="danger" v-if="scope.row.bstate==2">已拒绝</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" label="黑号提示" width="100">
          <template slot-scope="scope">
            <el-tag type="danger" v-show="scope.row.isBlack==1">{{ scope.row.isBlack==1?'黑号':'' }}</el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="bprice" label="报价金额" width="100" v-if="actived == '已报价'"></el-table-column>
        <el-table-column prop="btime" label="报价时间" width="160" v-if="actived == '已报价'"></el-table-column> -->
        <!-- <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="userInfo&&userInfo.userId==scope.row.supplyUserId">{{commonMaps.bstatusMap[scope.row.status||0].label}}</span>
            <span v-else>{{scope.row.status!=0?'已拒绝':commonMaps.bstatusMap[0].label}}</span>

          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text"  @click="openDetail(scope.row.id,'view')">查看详情</el-button>
            <el-button type="text" v-if="scope.row.bstate==1" @click="goMyhuishou()">去交易</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="pages-box">
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      
    </div>
    <jingjiaGoodsDetail ref="jingjiaGoodsDetail"></jingjiaGoodsDetail>
  </div>
</template>
  
  <script>
import jingpaiApi from "@/api/jingpaishichang/index.js";

import jingjiaGoodsDetail from "./components/jingjiaGoodsDetail.vue"
export default {
  name: "",
  components: {jingjiaGoodsDetail},
  data() {
    return {
      loading: false,
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gameId: "",
        status:''
      },
      statusMap:{
        0:{
          type:'success',
          label:'待接受'
        },
        1:{
          type:'success',
          label:'已接受'
        },
        2:{
          type:'warning',
          label:'已拒绝'
        }
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  created() {
    this.getList()
  },
  activated() {
    // this.getList();
  },
  methods: {
    openUrl(url) {
      window.open(url);
    },
    // 获取列表
    getList() {
      this.loading = true;
        jingpaiApi
          .backCluemyChuJia({
            ...this.queryParams
          })
          .then((response) => {
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
            this.loading = false;
          });
    },
    
  

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 打开详情
    openDetail(id){
        this.$refs.jingjiaGoodsDetail.open(id,'view')
    },
    //  去交易
    goMyhuishou(){
      this.$router.push({
        path:'/recycleManage/myHuishou'
      })
    },

    // 取消回收
    cancelOrder() {
      this.$prompt("请输入取消原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入原因",
        type: "warning",
      })
        .then(({ value }) => {
          //console.log('%c 🥜 value: ', 'font-size:20px;background-color: #465975;color:#fff;', value);
        })
        .catch(() => {});
    },
    
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        gameId: "",
        status:''
      };
      this.getList();
    },

  
  },
};
</script>
  <style lang="scss" scoped>
.zdy-des {
  cursor: pointer;
}
</style>
  